<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->

<!-- Custom Theme files -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<!--webfont-->
<!--<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>-->
 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>

	<script>
	$(function(){
	    $(".hov").hide();
	    $(".text").hide();
	    $(".col-md-3").hover(
        function()
        {
		    $(this).find(".hov").stop().fadeTo(286,0.5);
		    $(this).find(".text").stop().show();
	    },
	    function()
        {
            $(this).find(".hov").stop().fadeTo(286, 0);
            $(this).find(".text").stop().hide();
        });
    });
//    $(".like").hide();

//    $(function likeit(){
//        for(var i=1;i<=16;i++){
//            if(document.getElementById("u"+i).onclick==true){
//                document.getElementById("u"+i).hide();
//                document.getElementById("l"+i).show();
//            }
//        }
//    });
//
//    $(function unlikeit(){
//        for(var i=1;i<=16;i++){
//            if(document.getElementById("l"+i).onclick==true){
//                document.getElementById("l"+i).hide();
//                document.getElementById("u"+i).show();
//            }
//        }
//    });

</script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });

//        function change(n){
//            if(n%2==1){
//                document.getElementById('l'+(n+1)).style.display="inline";
//                document.getElementById('l'+n).style.display="none";
//
//            }
//            if(n%2==0){
//                document.getElementById('l'+n).style.display="none";
//                document.getElementById('l'+(n-1)).style.display="inline";
//            }
//        }

        function change(n,id){
            if(n%2==1){
                document.getElementById('l'+(n+1)).style.display="inline";
                document.getElementById('l'+n).style.display="none";


            }
            if(n%2==0){
                document.getElementById('l'+n).style.display="none";
                document.getElementById('l'+(n-1)).style.display="inline";
            }
        }

    </script>
    <style>
        .thumbnail {
            max-height:210px;
            min-height:200px;
            overflow:hidden;
            bottom:0;
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>
	<!-- header-section-starts -->
	<div class="header" id="header" style="background: #27121c">
		<div class="container">
            <div class="reglogbar">
                <div>
                    <a href="login.html">LOGIN</a>
                    |
                    <a href="register.html">REGISTER</a>
                </div>
            </div>
			<div class="logo" style="padding: 10px;">
				<a href="index.html"><img src="images/imangine.png" alt="" /></a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
    <div class="slideing">
        <div class="head-bg">
            <!-- container -->
            <div class="container">
                <!--<div class="head-logo">-->
                    <!--<a href="index.html"><img src="images/logo.png" alt="" /></a>-->
                <!--</div>-->
                <div class="top-nav">
                    <ul class="cl-effect-1">
                        <li><a href="about.html">About us</a></li>
                        <li><a href="search.html">Search</a></li>
                        <li><a href="group.html">Group</a></li>
                        <li><a href="album.html">Album</a></li>
                        <li><a href="pic.html">Picture</a></li>
                        <!--<div class="clearfix"></div>-->
                    </ul>
                    <!-- script-for-menu -->
                    <script>
                        $( "span.menu" ).click(function() {
                            $( "ul.cl-effect-1" ).slideToggle( 300, function() {
                                // Animation complete.
                            });
                        });
                    </script>
                    <!-- /script-for-menu -->
                </div>
                <div class="clearfix"> </div>
            </div>
            <!-- //container -->
        </div>
        <!-- container -->
        <div class="container">
            <!-- banner Slider starts Here -->
            <script src="js/responsiveslides.min.js"></script>
            <script>
                // You can also use "$(window).load(function() {"
                $(function () {
                    // Slideshow 4
                    $("#slider3").responsiveSlides({
                        auto: true,
                        pager: false,
                        nav: false,
                        speed: 500,
                        namespace: "callbacks",
                        before: function () {
                            $('.events').append("<li>before event fired.</li>");
                        },
                        after: function () {
                            $('.events').append("<li>after event fired.</li>");
                        }
                    });

                });


//                function change(n){
//                    if(n==1){
//                        document.getElementById('l2').show();
//                        document.getElementById('l1').hidden();
//                    }
//                    if(n==2){
//                        document.getElementById('l1').show();
//                        document.getElementById('l2').hidden();
//                    }
//                }
            </script>
            <!--//End-slider-script -->
            <div  id="top" class="callbacks_container">
                <ul class="rslides" id="slider3">
                    <li>
                        <div class="head-info">
                            <h1>Life<span>Innovate and take the time</span></h1>
                            <p>Investing the resources and caring enough to try.</p>
                        </div>
                    </li>
                    <li>
                        <div class="head-info">
                            <h1>Design<span>Soul of a human-made creation</span></h1>
                            <p>Nothing could be further from the meaning of design. </p>
                        </div>
                    </li>
                    <li>
                        <div class="head-info">
                            <h1>Sharing<span>Good coffee to friends and taste</span></h1>
                            <p>We must be Shared with other life of our earth.</p>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <!-- container -->
    </div>
	<!--<div class="header-bottom">-->
		<!--<div class="container">-->
		<!--</div>-->
	<!--</div>-->
	<!--<div class="navigation-strip">-->
		<!--<div class="container">-->
			<!--<div class="nav_content">-->
				<!--<div class="home">-->
					<!--<a href="index.html"><img src="images/home.png" alt="" /></a>-->
				<!--</div>-->
				<!--<!-- <div class="search">-->
					<!--<form>-->
						<!--<input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>-->
						<!--<input type="submit" value="">-->
					<!--</form>-->
				<!--</div> -->
			<!--<span class="menu"></span>-->
				<!--<div class="top-menu">-->
					<!--<ul>-->
						<!--<li><a href="pic.html">Sharing</li>			-->
						<!--<li><a href="blog.html">Personal</a></li>-->
						<!--<li><a href="portfolio.html">Tags</a></li>-->
						<!--<!-- <li><a href="404.html">Features</a></li>-->
						<!--<li><a href="contact.html">Contact</a></li> -->
						<!--<li><a href="about.html">About Us</a></li>-->
						<!--<div class="clearfix"></div>-->
					<!--</ul>-->
				<!--</div>-->
				<!--<!-- script for menu -->
				<!--<script>-->
				<!--$( "span.menu" ).click(function() {-->
				  <!--$( ".top-menu" ).slideToggle( "slow", function() {-->
				    <!--// Animation complete.-->
				  <!--});-->
				<!--});-->
			    <!--</script>-->
			    <!--<!-- script for menu -->
				<!--<div class="clearfix"></div>-->
			<!--</div>-->
		<!--</div>-->
	<!--</div>-->
<div class="content">
	<div class="container">
		<div class="projects-section">
				<h4 class="head">Hot Sharing<span class="line"></span></h4>				
			<div class="latest-projects">
                <div class="row">
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p1.jpg" alt="" /></a>
						<div class="hov">
                           <img class="likeit pull-right" id="l1" onclick="change(1)" style="display:inline;"  src="images/hollowheart.png"/>
                           <img class="likeit pull-right" id="l2" onclick="change(2)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>Animation <span>Spongbob</span></div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p2.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l3" onclick="change(3)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l4" onclick="change(4)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p3.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l5" onclick="change(5)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l6" onclick="change(6)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p4.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l7" onclick="change(7)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l8" onclick="change(8)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
                </div>
                <div class="row">
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p5.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l9" onclick="change(9)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l10" onclick="change(10)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p6.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l11" onclick="change(11)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l12" onclick="change(12)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"> <img src="images/p7.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l13" onclick="change(13)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l14" onclick="change(14)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p8.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l15" onclick="change(15)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l16" onclick="change(16)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
                </div>
                <div class="row">
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p9.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l17" onclick="change(17)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l18" onclick="change(18)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p10.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l19" onclick="change(19)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l20" onclick="change(20)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p11.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l21" onclick="change(21)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l22" onclick="change(22)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p12.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l23" onclick="change(23)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l24" onclick="change(24)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p13.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l25" onclick="change(25)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l26" onclick="change(26)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p14.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l27" onclick="change(27)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l28" onclick="change(28)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p15.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l29" onclick="change(29)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l30" onclick="change(30)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p16.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l31" onclick="change(31)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l32" onclick="change(32)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                </div>
                <div class="clearfix"></div>
			</div>
		</div>

	    <div class="testimonials">
			<div id="testimonials">
			    <div class="wmuSlider example1">
		 	        <div class="container-flueid">
		                 <article style="position: absolute;">
				   	        <div class=" cont span_2_of_3  client-main">
							    <div class="slide-text">
								<p>Praesent pulvinar, est eget pharetra euismod, metus felis condimentum massa, ut vestibulum ipsum risus vel ligula. In hac habitasse platea dictumst.</p>
						  		<a href="#">by Esmet Hajrizi</a>
								<div class="clearfix"></div>								
						 	    </div>
					        </div>
				         </article>
				         <article style="position: absolute;">
				   	        <div class=" cont span_2_of_3  client-main">
							    <div class="slide-text">
								    <p>Praesent pulvinar, est eget pharetra euismod, metus felis condimentum massa, ut vestibulum ipsum risus vel ligula. In hac habitasse platea dictumst.</p>
						  		    <a href="#">by Esmet Hajrizi</a>
								    <div class="clearfix"></div>
						 	    </div>
					        </div>
				         </article>
				         <article style="position: absolute;">
				   	        <div class=" cont span_2_of_3  client-main">
							    <div class="slide-text">
								    <p>Praesent pulvinar, est eget pharetra euismod, metus felis condimentum massa, ut vestibulum ipsum risus vel ligula. In hac habitasse platea dictumst.</p>
						  		    <a href="#">by Esmet Hajrizi</a>
								    <div class="clearfix"></div>
						 	    </div>
					        </div>
				            </article>
                             <article style="position: absolute;">
                                <div class=" cont span_2_of_3  client-main">
                                        <div class="slide-text">
                                            <p>Praesent pulvinar, est eget pharetra euismod, metus felis condimentum massa, ut vestibulum ipsum risus vel ligula. In hac habitasse platea dictumst.</p>
                                            <a href="#">by Esmet Hajrizi</a>
                                            <div class="clearfix"></div>
                                        </div>
                                </div>
                             </article>
                             <script src="js/jquery.wmuSlider.js"></script>
                                <script>
                                     $('.example1').wmuSlider();
                                </script>
						    <div class="clearfix"></div>
	                </div>
	            </div>
		        <div class="arrow">
			        <div class="shows">
				        <span class="a1"><img src="images/tes.png" alt="" /></span>
			        </div>
		        </div>
			</div>
		</div>
	</div>
</div>
	<div class="footer">
		<div class="footer-top">
			<div class="container">
				<div class="col-md-4 footer-grid">
					<h5>ABOUT US</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
				</div>
				<div class="col-md-4 footer-grid">
					
				</div>
				<div class="col-md-4 footer-grid">
					<h5>FOLLOW US</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>
					
			
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="container">
				<div class="copyrights">
					<p>Copyright &copy; 2015.Imangine All rights reserved.</p>
				</div>
				<div class="go-top">
					<a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	
</body>
</html>